<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle :title="title" :is_name="true" :is_back="true" :is_lang="false" :is_kf="false"></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="box">
          <div class="itemBox">
            <ul>
              <li>
                <div class="n">{{ $t("page4.doc11") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input type="text" :placeholder="$t('page4.doc12')" v-model="countryName" />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc13") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input type="text" :placeholder="$t('page4.doc14')" v-model="name" />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc15") }}</div>
                <div class="val flex">
                  <div class="flex1 flex2" @click="type_show = true">
                    <input type="text" v-model="typeName" readonly />
                    <van-icon class="icon" color="#B5B5B5" name="arrow" />
                  </div>
                </div>
              </li>
              <li>
                <div class="n">{{ $t("page4.doc16") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input type="text" :placeholder="$t('page4.doc17')" v-model="identityNumber" />
                  </div>
                </div>
              </li>
              <li>
                <!--邮箱验证码-->
                <SendCodeInp
                  v-model="code"
                  :title="$t('page4.doc156')"
                  :placeholder="$t('page4.doc157')"
                  :rightText="userData.email"
                  :accountType="1"
                  :account="userData.email"
                  verifyType="4"
                  class="real-name mt"
                />
              </li>
              <li>
                <div class="n">{{ $t("page4.doc18") }}</div>
                <div class="val flex card-wrapper">
                  <div class="ul">
                    <div class="li" @click="picClick(index)" v-for="(item, index) in pic_list" :key="index" :style="{
                      background: `url(${require(`../../assets/images/cardBg${index + 1
                        }.png`)})`,
                    }">
                      <div class="pic">
                        <div v-if="item.files" style="width: 100%; height: 100%;">
                          <img :src="item.files" alt="" style="width: 100%; height: 100%;" class="preview" />
                        </div>
                        <div v-else>
                        </div>
                        <input class="file" type="file" accept="image/*" @change="handleAfterRead" />
                      </div>
                      <!--                      <div class="title">{{ item.name }}</div>-->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="bot">
            <button class="btn" @click="onBtn()" :disabled="isDisable">
              {{ $t("page4.doc22") }}
            </button>
          </div>
        </div>
      </div>
      <van-popup v-model="type_show" round position="bottom">
        <van-picker :title="$t('page.doc9')" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
          item-height=".8rem" :confirm-button-text="$t('page.doc83')" :cancel-button-text="$t('page4.doc63')" />
      </van-popup>
    </template>
  </page-scroll>
</template>

<script>
export default {
  data() {
    return {
      title: this.$t("title.doc51"),
      type_show: false,
      countryName: "",
      name: "",
      identityNumber: "",
      columns: [this.$t("page4.doc23"), this.$t("page4.doc24")],
      typeName: this.$t("page4.doc23"),
      type: 0,
      pic_list: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc20"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_list1: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc20"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_list2: [
        { name: this.$t("page4.doc19"), files: "" },
        { name: this.$t("page4.doc21"), files: "" },
      ],
      pic_index: 0,
      isDisable: false,
      code: "",
    };
  },
  mounted() { },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    onConfirm(value, index) {
      this.type_show = false;
      this.typeName = value;
      this.type = index;
      this.identityNumber = "";
      this.pic_list = [];
      if (index == 0) {
        this.pic_list = this.pic_list1;
      } else {
        this.pic_list = this.pic_list2;
      }
      this.pic_list.map((item) => {
        item.files = "";
      });
    },
    onCancel() {
      this.type_show = false;
    },
    picClick(i) {
      this.pic_index = i;
    },

    //图片上传
    async handleAfterRead(e) {
      const toast = this.$toast.loading({
        forbidClick: true,
      });
      const file = await this.common.compressor(e, {}).catch(() => {
        toast.clear();
        return;
      });

      this.$post(this.URL.user.upimg, file, {
        isUpload: true,
      })
        .then((res) => {
          if (res.code == 0) {
            this.pic_list[this.pic_index].files = res.data.url;
          }
          this.$toast(res.message);
        })
        .finally(() => {
          toast.clear();
        });
    },
    onOversize(file) {
      if (file) {
        // this.$toast('文件大小不能超过 3M');
        this.$toast(this.$t("page4.doc50"));
      }
    },
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg"
      ) {
        // this.$toast('请上传 png/jpg/jpeg 格式图片');
        this.$toast(this.$t("page4.doc51", { k: "png/jpg/jpeg" }));
        return false;
      }
      return true;
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
    onBtn() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 2000);
      if (!this.isDisable) {
        return;
      }

      let frontCertificate = this.pic_list[0].files;
      let reverseCertificate = "";
      let handFrontCertificate = "";
      if (this.pic_list.length == 2) {
        reverseCertificate = "";
        handFrontCertificate = this.pic_list[1].files;
      } else {
        reverseCertificate = this.pic_list[1].files;
        handFrontCertificate = this.pic_list[2].files;
      }

      if (!this.countryName) {
        this.$toast.fail(this.$t("page4.doc12"));
        return;
      }
      if (!this.name) {
        this.$toast.fail(this.$t("page4.doc14"));
        return;
      }
      if (!this.identityNumber) {
        this.$toast.fail(this.$t("page4.doc17"));
        return;
      }
      if (!this.code) {
        return this.$toast(this.$t("page4.doc157"));
      }
      if (!frontCertificate) {
        this.$toast.fail(this.$t("page4.doc25"));
        return;
      }
      if (!reverseCertificate && this.type == 0) {
        this.$toast.fail(this.$t("page4.doc26"));
        return;
      }
      if (!handFrontCertificate) {
        this.$toast.fail(this.$t("page4.doc21"));
        return;
      }

      this.$post(this.URL.user.identity, {
        code: this.code,
        name: this.name,
        type: this.type,
        countryName: this.countryName,
        identityNumber: this.identityNumber,
        frontCertificate: frontCertificate,
        reverseCertificate: reverseCertificate,
        handFrontCertificate: handFrontCertificate,
      }).then((res) => {
        if (res.code == 0) {
          this.$router.back()

          this.$toast(res.message);
          this.countryName = "";
          this.name = "";
          this.identityNumber = "";
          this.code = ''
          this.pic_list.map((item) => {
            item.files = "";
          });

          // 状态(-2-未实名, -1-不通过， 0-待审核， 1-通过)
          if (res.status == 1) {
            this.path_url("/my/prompt_success");
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  border-radius: 0.16rem;
}

.container {
  background-color: #151515;
  min-height: 100vh;
}

.box {
  padding-top: 0.3rem;

  ul {
    li {
      margin-bottom: 0.32rem;

      .flex1 {
        height: 0.8rem;
        border-radius: 0.16rem;
        padding: 0 0.3rem;
        line-height: 0.8rem;
        background: var(--CObackgroundLinear3);
      }

      .real-name {
        /deep/ .title_box {
          font-size: 0.26rem;
        }

        /deep/ .inp_content_box {
          background: #181c21 !important;
          height: 0.8rem;

          input {
            font-size: 0.26rem;

            &::placeholder {
              font-size: 0.26rem;
            }
          }
        }
      }

      .flex2 {
        display: flex;
        align-items: center;
      }

      .val {
        border-radius: 0.16rem;

        .ul {
          width: 100%;
          display: flex;
          align-content: space-around;

          .li {
            border-radius: 0.1rem;
            margin-right: 0.26rem;
            width: 30%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            //background: url("../../assets/images/cardBg1.png") no-repeat;
            background-size: 100% 100% !important;
            height: 2.16rem;
            padding: 1px;
            overflow: hidden;

            .preview {
              border-radius: 0.2rem !important;
              overflow: hidden;
            }

            .pic {
              //padding: 0.32rem 0.24rem;
              position: relative;
              width: 100%;
              height: 100%;

              img {
                height: 0.92rem;
                width: 1.42rem;
              }

              .pic_icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-0.36rem, -0.36rem);
                width: 0.72rem;
                height: 0.72rem;
              }

              .file {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                width: 100%;
                height: 100%;
              }
            }

            .title {
              //styleName: test01.topone99999.info/Semantic/Item;
              font-family: var(--fontfamilyFont1);
              font-size: var(--fontsize14);
              color: #ffffff;
            }
          }

          li:last-child {
            margin-right: 0rem;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }

        input {
          width: 100%;
          background: none;
          height: 0.8rem;
          border: 0;

          &::placeholder {
            font-size: 0.26rem;
          }
        }
      }
    }

    li:last-child {
      margin-bottom: 0;
    }
  }

  .n {
    margin-bottom: 0.26rem;
    font-size: 0.26rem;
    font-weight: 500;
    color: #fff;
  }
}

.bot {
  padding-top: 0.3rem;
}

.btn {
  background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
  color: #000;
  border-radius: 0.4rem;
  font-weight: bold;
}

.itemBox {
  background-color: transparent;
  padding: 0;

  li {
    .n {
      color: #ffffffcc;
    }

    .flex1 {
      background-color: #181c21 !important;
    }
  }
}

.card-wrapper {
  .ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.22rem;

    .li {
      width: 100% !important;
      margin: 0 !important;
    }
  }
}
</style>
